<template>
  <div class="role-list">
    <div class="" style="height:70px;" v-show="canShow"></div>
    <div class="authority-title">
      <h2>药品支出详情</h2>
      <svg class="all-close-btn icon-svg" v-show="!fullScreen" @click="closeAll" viewBox="0 0 612 792">
        <path :d="svgPath.closeFullScreen"/>
      </svg>
      <div class="top-right" @click="goBack">
        返回
      </div>
    </div>

    <!-- 表格主体 -->
    <div class="role-list-content" style="position:relative;">
      <!-- 头部筛选 -->
      <div class="role-list-search" style="background: linear-gradient(90deg, #23313c 0%, #1e2f43 50%, #1f304e 100%)">
        <div class="search-header">
          <h3 class="chart-title">
            <div class="area-title-name" @mouseenter="mouseenter()"
                 @mouseleave="mouseleave()">{{ areaTitle }} &nbsp; | &nbsp; {{this.hospNameTitle }} &nbsp; | &nbsp;
              {{this.propParams.medicalType}} &nbsp; | &nbsp; {{this.propParams.year}}年 &nbsp; | &nbsp;
              {{this.disNameTitle }} &nbsp; | &nbsp;{{this.drugsNameTitle}}
            </div>
          </h3>
        </div>
        <div class="search-content">
          <input class="dap-input" type="text" v-model="searchName" style="margin-right:20px;" maxlength="20"
                 placeholder="请输入医院名称">
          <SpecialSingleListFilter :isReset="isReset"
                                   @confirmSingleSelect="hospLevelSelect"
                                   defaultText="医院等级"
                                   :filter="filterData"
                                   type="hospLevel"
                                   :defaultSelectAll="true">
          </SpecialSingleListFilter>
          <div class="search-btn">
            <span class="dap-button" @click="searchItem">搜索</span>
          </div>
          <div class="search-btn">
            <span style="margin-left:18px;" class="dap-close-button" :class="canReset?'canReset':''"
                  @click="reset">重置</span>
          </div>
        </div>
      </div>
      <!-- 头部左侧显示浮窗  -->
      <div class="chart-title-floating" v-show="showFloating">
        <span>统筹区: {{ this.propParams.areaName }}</span><br>
        <span>医院: {{ this.propParams.hospName }}</span><br>
        <span>医疗类型: {{ this.propParams.medicalType }}</span><br>
        <span>年份: {{ this.propParams.year }}</span><br>
        <span>疾病名称: {{ this.propParams.disName }}</span><br>
        <span>药品名称: {{ this.propParams.drugsName }}</span>
      </div>
      <!-- 表格 -->
      <div class="role-list-table">
        <div class="table-title"></div>
        <div class="table-content">
          <el-table
            :data="tableData"
            v-loading="loadingShow"
            element-loading-text="loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            height="10">
            <el-table-column
              prop="number"
              width="60px"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="hospName"
              label="医院名称"
              align="center"
              :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
              prop="hospLevel"
              label="医院等级"
              align="center">
            </el-table-column>
            <el-table-column
              prop="drugsTotalAmount"
              label="药品总金额（元）"
              align="center">
            </el-table-column>
            <el-table-column
              prop="drugsDosage"
              label="药品总用量"
              align="center">
            </el-table-column>
            <el-table-column
              prop="subAverageCost"
              label="次均费用（元）"
              align="center">
            </el-table-column>
            <el-table-column
              prop="subDosage"
              label="次均用量"
              align="center">
            </el-table-column>
            <el-table-column
              prop="useDrugPersonTime"
              label="用药人次（次）"
              align="center">
            </el-table-column>
            <el-table-column
              prop="useDrugPersonNumber"
              label="用药人数（人）"
              align="center">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--分页-->
      <dap-page :pageTotal="total"
                v-on:pageSizeChange="pageSizeChange"
                v-on:pageCurrentChange="pageChange"
                :currentPage="currentPage">
      </dap-page>
    </div>
  </div>
</template>
<script>
  import {getSearchItems, baseApiF} from '../../../api/api'
  import {svgPath, quitFullScreen} from '../../../assets/js/utils'
  import {filterLogText} from '../../../api/authority'
  import dapPage from '../../view/dap-page.vue';
  import dapPopover from '../../view/dap-popover.vue';
  import SpecialSingleListFilter from '../../last/filter/special-single-list-filter'

  export default {
    props: ['isChange', 'fullScreen'],
    data () {
      return {
        svgPath: svgPath,
        canShow: true,

        searchName: '',

        tableData: [],
        totalData: [],
        currentPage: 1,
        pageSize: 20,
        total: 0,

        loadingShow: true,
        showFloating: false,
        areaTitle: '',
        hospNameTitle: '',
        disNameTitle: '',
        drugsNameTitle: '',
        filter: null,
        filterData: null,
        propParams: {}, // 传递过来的参数

        canReset: true,
        isReset: false,

        selectedIdString: ''
      }
    },
    components: {
      dapPage,
      dapPopover,
      SpecialSingleListFilter
    },
    watch: {
      isChange () {
        if (document.querySelector('.el-header')) {
          this.canShow = true;
        } else {
          this.canShow = false;
        }
      },
      searchName (val) {
        if (val == '') {
          this.canReset = true;
        } else {
          this.canReset = false;
        }
      }
    },
    mounted () {
      this.initData();
    },
    methods: {
      // 点击选择医院回调
      hospLevelSelect(data) {
        let tempArray = [];
        data.map((item, index) => {
          if (item.isChecked && item.selectId.length) {
            tempArray.push(item.selectId);
          }
        });

        this.selectedIdString = tempArray.join(',');
      },
      // 取消全屏
      closeAll () {
        quitFullScreen();
      },
      getData () {

        this.loadingShow = true;

        let data = {};
        data.areaCode = this.propParams.areaCode; // 统筹区编码,空值代表全部,多个用逗号分隔
        data.hospCode = this.propParams.hospCode; // 医院编码,空值代表全部,多个用逗号分隔
        data.medicalCategory = this.propParams.medicalTypeCode; // 医疗类别筛选项
        data.queryYear = this.propParams.year; // 查询年份,格式：yyyy
        data.disId = this.propParams.disId; // 病种Id
        data.drugsName = this.propParams.drugsName;// 药品名称
        data.hospitalName = this.searchName;// 医院名称
        data.hospLevel = this.propParams.hospLevel;// 医院等级
        data.hospLevel2 = this.selectedIdString;// 医院级别2
        // data.paixu = 2;


        this.$axios.post(baseApiF() + 'MedicalDrugs/DrugsPayDetail', data)
          .then(res => {
          let data = res.data;
          if (data.code == 0) {
            data.data.map((item, index) => {
              item.number = index + 1;
              // item.amoutReal = Number(item.amoutReal);
            });
            this.totalData = data.data;
            this.tableData = data.data.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
            console.log(this.tableData)
            this.total = data.data.length;
            this.loadingShow = false;
          } else {
            this.totalData = [];
            this.tableData = [];
            this.total = 0;
            this.loadingShow = false;
          }
        }).catch(res => {
          this.totalData = [];
          this.tableData = [];
          this.total = 0;
          this.loadingShow = false;
        })
      },
      searchItem () {

        if (!this.selectedIdString.length) {
          this.$message({
            message: '医院等级不能为空',
            center: true,
            type: 'info'
          });
          return;
        }

        this.getData()
      },
      reset () {
        if (this.canReset) {
          return;
        }
        this.isReset = !this.isReset;
        this.searchName = '';

        this.getData();
      },
      initData () {

        let data = this.$route.query;
        this.propParams = {
          'areaName': data.areaName,
          'areaCode': data.areaCode,
          'hospName': '',
          'hospCode': data.hospCode,
          'year': data.queryYear + '',
          'medicalType': data.medicalType,
          'medicalTypeCode': data.medicalTypeCode,
          'hospLevel': data.hospLevel,

          'disId': data.disId,
          'disName': data.disName,
          'drugsName': data.drugsName,
        };

        this.disNameTitle = (this.propParams.disName ? filterLogText(this.propParams.disName) : '');
        this.areaTitle = (this.propParams.areaName ? filterLogText(this.propParams.areaName) : '');

        this.drugsNameTitle = (this.propParams.drugsName ? filterLogText(this.propParams.drugsName) : '');

        getSearchItems('init/initInput')
          .then((res) => {
            if (res.code == 0) {
              this.filter = res.data;

              let hospName = this.getHospName(data);
              this.propParams.hospName = hospName;
              this.hospNameTitle = filterLogText(this.propParams.hospName);

              this.getData()
            }
          });
      },
      getHospName (data) {

        let tempFilterData = [];

        let mainHospIdArr = data.resultLevel.split(',');
        let subHospIdArr = data.hospCode.split(',');
        let hospName = '';

        tempFilterData.push({selectName: '全部', selectId: ''});

        //  三级医院
        let tempName = '';
        if (mainHospIdArr.includes('3')) {
          tempName += '三级医院';
        } else {
          if (subHospIdArr.length) {
            tempName += this.getSubHospName(subHospIdArr, this.filter.nc.detailHospital[0].child);
          }
        }

        if (hospName.length && tempName.length) {
          hospName += '、';

        }
        if (tempName.length) {
          hospName += tempName;
          tempFilterData.push({selectName: '三级医院', selectId: '3',})
        }


        //  二级医院
        tempName = '';
        if (mainHospIdArr.includes('2')) {
          tempName += '二级医院';
        } else {
          tempName += this.getSubHospName(subHospIdArr, this.filter.nc.detailHospital[1].child);
        }
        if (hospName.length && tempName.length) {
          hospName += '、';

        }

        if (tempName.length) {
          hospName += tempName;
          tempFilterData.push({selectName: '二级医院', selectId: '2',})
        }

        //  一级医院
        tempName = '';
        if (mainHospIdArr.includes('1')) {
          tempName += '一级医院';
        }
        if (hospName.length && tempName.length) {
          hospName += '、';
        }

        if (tempName.length) {
          hospName += tempName;
          tempFilterData.push({selectName: '一级医院', selectId: '1',})
        }

        this.filterData = JSON.parse(JSON.stringify(tempFilterData));

        return hospName;
      },
      getSubHospName (subHospCodes, filter) {
        let subHospName = [];
        subHospCodes.forEach((item, index) => {
          filter.forEach((obj, objIndex) => {
            if (item == obj.selectId) {
              subHospName.push(obj.selectName);
            }
          });
        });

        return subHospName.join('、');
      },
      goBack () {
        this.$router.go(-1);
        sessionStorage.setItem('isPrev','2')
      },
      mouseenter () {
        this.showFloating = true;
      },
      mouseleave () {
        this.showFloating = false;
      },
      pageSizeChange (val) {
        this.pageSize = val;
        // this.currentPage = 1;
        this.getData()
      },
      pageChange (val) {
        this.currentPage = val;
        // this.getData()
        this.tableData = this.totalData.slice((val - 1) * this.pageSize, val * this.pageSize)
      },
    }
  }
</script>
<style scoped>
  @import '../../../assets/css/authority.css';

  .canReset {
    color: #969ca5;
    border: #313d4f solid 1px;
    cursor: not-allowed;
  }

  .canReset:hover {
    color: #969ca5;
    border: #313d4f solid 1px;
    background: none;
  }

  .top-right {
    float: right;
    margin-right: 30px;
    font-size: 16px;
    color: #1380e1;
    cursor: pointer;
  }

  .chart-title-floating {
    font-size: 12px;
    color: #fff;
    margin-left: 24px;
    width: 200px;
    line-height: 22px;
    padding: 10px;
    border-radius: 5px;
    background-color: #1a2940;
    border: 1px solid #313d4f;
    position: absolute;
    z-index: 2001;
    margin-top: 54px;
  }

  .role-list {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .role-list-content {
    margin: 30px 30px 0 30px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  /*搜索*/
  .role-list-search {
    height: 130px;
    background: linear-gradient(left, #23313c 0%, #1e2f43 50%, #1f304e 100%);
  }

  .role-list-search .search-header {
    height: 60px;
    border-bottom: 1px solid #283f59;
    display: flex;
    align-items: center;
  }

  .role-list-search .search-header > span {
    font-size: 14px;
    color: #9b9aad;
    padding-left: 8px;
  }

  .role-list-search .search-content {
    height: 70px;
    display: flex;
    align-items: center;
  }

  .role-list-search .search-content > span {
    font-size: 12px;
    padding-left: 18px;
    color: #9b9aad;
  }

  .role-list-search .search-content > input {
    margin-left: 10px;
  }

  .role-list-search .search-content .search-btn > span {
    margin-left: 42px;
  }

  /*表格*/
  .role-list-table {
    margin-top: 20px;
    background: #1b2b44;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  .role-list-table .table-title {
    height: 15px;
    background: #1b2b44;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .role-list-table .table-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
</style>

<!--修改框架样式-->
<style>
  .item {
    cursor: pointer;
  }

  .popover-text {
    text-align: center;
    padding-top: 32px;
    font-weight: normal;
  }

  .toastInfo {
    color: #fff;
  }

  .showTooltip {
    opacity: 1;
  }
</style>
